<%--
  Created by IntelliJ IDEA.
  User: dzw
  Date: 2018/1/12
  Time: 14:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
  String _id=request.getParameter("_");
  String jsessionid = session.getId();
%>

<form id="form_pay_input" class="mui-input-group">

  <input type="hidden" name="keyId" id="keyId" value="${pay.id}"/>

  <div class="mui-input-row">
    <label>付款事由</label>
    <input disabled type="text" id="typeDict" class="mui-input-clear" placeholder="请选择付款事由" value="${pay.type.name}">
    <input type="hidden" id="typeDictId" name="typeDictId" value="${pay.type.id}" />
  </div>

  <div class="mui-input-row">
    <label>付款金额（元）</label>
    <input disabled type="number" id="amount" name="amount" class="mui-input-clear" placeholder="请输入报销付款金额（元）" value="${pay.amount}" >
  </div>

  <div class="mui-input-row">
    <label>支付日期</label>
    <input disabled type="text" id="payDate" name="payDate" class="mui-input-clear" placeholder="请选择支付日期" value="<fmt:formatDate pattern="yyyy-MM-dd" value="${pay.payDate}" />">
  </div>

  <div class="mui-input-row">
    <label>支付对象</label>
    <input disabled type="text" id="object" name="object" class="mui-input-clear" placeholder="请输入支付对象" value="${pay.object}" >
  </div>

  <div class="mui-input-row">
    <label>开户行</label>
    <input disabled type="text" id="bank" name="bank" class="mui-input-clear" placeholder="请输入开户行" value="${pay.bank}" >
  </div>

  <div class="mui-input-row">
    <label>银行账号</label>
    <input disabled type="number" id="account" name="account" class="mui-input-clear" placeholder="请输入银行账号" value="${pay.account}" >
  </div>


  <%--===================================================================================--%>

  <h5 class="mui-content-padded">提交信息</h5>
  <div class="mui-input-row">
    <label>提交人</label>
    <input disabled type="text" class="mui-input-clear" value="${pay.creater.name}">
  </div>
  <div class="mui-input-row">
    <label>联系方式</label>
    <input disabled type="text" class="mui-input-clear" value="<fmt:formatDate pattern="yyyy-MM-dd" value="${pay.createTime}" />">
  </div>

  <c:if test='${pay.processState != "Finished" && pay.processState != "Deny"}'>
    <h5 class="mui-content-padded">下一步流程</h5>
    <div class="mui-input-row mui-radio">
      <label>归档</label>
      <input type="radio" id="nextNo" name="next" value="0">
    </div>
    <div class="mui-input-row mui-radio">
      <label>选择下一步操作人</label>
      <input type="radio" id="nextYes" name="next" value="1">
    </div>

    <div id="showNextStep" class="mui-input-row" style="display: none">
      <label>下一操作人</label>
      <input readonly type="text" id="editors" name="editors" class="mui-input-clear" placeholder="请选择下一步操作人">
      <input type="hidden" id="editorsId" name="editorsId">
    </div>
  </c:if>

</form>

<div class="mui-col-xs-12 mui-col-sm-12 flow">
  <button type="button" class="mui-btn" id="apply-re-common">返回</button>
  <button type="button" class="mui-btn mui-btn-primary" id="ajax_edit" ${userEdit}>编辑</button>
</div>

<div class="f_title"><span class="mui-icon mui-icon-arrowright" id="flow" style="font-size: 15px"></span>流程信息</div>
<div class="f_content" style="display:none">
  <div id="showFlow"></div>
</div>
<div class="f_title"><span class="mui-icon mui-icon-arrowright" id="next" style="font-size: 15px"></span>下一步骤提示</div>
<div class="f_content" style="display:none">
  <div id="showNext"></div>
</div>

<div class="mui-col-xs-12 mui-col-sm-12">

</div>

<script>

  var state = "${pay.processState}";
  var index = "${index}";
  var todo = "${todo}";
  var remind = "${remind}";
  var record = "${record}";
  var draft =  "${draft}";
  var stepNo = "${stepNo}";

  $(function(){
    loadURL("<%=path%>/com/running/newWorkflow?bussinessId="+$("input#keyId").val()+"&type=flow",$('#showFlow'));
    loadURL("<%=path%>/com/running/newWorkflow?bussinessId="+$("input#keyId").val()+"&type=next",$('#showNext'));
    if(state !=  "Finished" &&  state !=  "Deny"){
      __ajax_post("<%=path%>/com/running/newOperateType",{keyId: $("input#keyId").val()},function(pdata){
        var area = $("div.flow");
        $(pdata.datarows).each(function(i,v){
          var str = '<button id="left_foot_btn_'+ v.action+'" type="button" class="mui-btn mui-btn-warning">'+ v.name+'</button>&nbsp;';
          $(area).append(str);
        });

        //通过
        $("#left_foot_btn_approve").off("click").on("click",function(){
          if($(":checked[name='next']").length < 1){
            mui.toast("请先选择下一步流程");
            return false;
          }else if($(":checked[name='next']").val()==1 && $("#editorsId").val()==""){
            mui.toast("请先选择下一步审批人");
            return false;
          }
          var form_id="form_pay_input";
          var url="<%=path%>/mp/pay/approve";
          mp_approve(form_id,url);
        });

        //退回
        $("#left_foot_btn_sendback").off("click").on("click",function(){
          var keyId=$("#keyId").val();
          var vActionUrl="<%=path%>/mp/pay/back";
          mp_back(keyId,vActionUrl);
        });

        //否决
        $("#left_foot_btn_deny").off("click").on("click",function(){
          var vActionUrl="<%=path%>/mp/pay/deny";
          var keyId = $("input#keyId").val();
          mp_deny(keyId, vActionUrl);
        });
      });
    }

    //下一步点击
    $(':radio[name="next"]').click(function(){
      if($(this).val() == "1"){
        $('#showNextStep').show();
      }else{
        $('#showNextStep').hide();
      }
    });

    //流程信息展开
    var flow=document.getElementById("flow");
    var next=document.getElementById("next");
    flow.addEventListener('tap',function(){
      if($(this).hasClass("mui-icon-arrowright")){
        $(this).removeClass("mui-icon-arrowright").addClass("mui-icon-arrowdown");
        $(this).parent(".f_title").next("div.f_content").show();
      }else{
        $(this).removeClass("mui-icon-arrowdown").addClass("mui-icon-arrowright");
        $(this).parent(".f_title").next("div.f_content").hide();
      }
    });

    next.addEventListener('tap',function(){
      if($(this).hasClass("mui-icon-arrowright")){
        $(this).removeClass("mui-icon-arrowright").addClass("mui-icon-arrowdown");
        $(this).parent(".f_title").next("div.f_content").show();
      }else{
        $(this).removeClass("mui-icon-arrowdown").addClass("mui-icon-arrowright");
        $(this).parent(".f_title").next("div.f_content").hide();
      }
    });

  });

  $("#editors").click(function(){
    __ajax_get("<%=path%>/main/member/list",null,function(data){
      var userArr=data.dataRows;
      var arr=new Array();
      for(var i=0;i<userArr.length;i++){
        var user={"value":userArr[i].id,"text":userArr[i].name};
        arr.push(user);
      }
      var picker = new mui.PopPicker();
      picker.setData(arr);
      picker.show(function (selectItems){
        $("#form_pay_input #editors").val(selectItems[0].text);
        $("#form_pay_input #editorsId").val(selectItems[0].value);
        $("#editors").blur();
      });
    });
  });

  //返回视图
  $("#apply-re-common").click(function(){
//    if(index==1){
//      loadURL("menu/dashboard",$('#page-content'));
//    }else if(todo==1){
//      loadURL("menu/toDo",$('#page-content'));
//    }else if(remind==1){
//      loadURL("menu/remind",$('#page-content'));
//    }else if(record==1){
//      loadURL("menu/taskRecord?type=1",$('#page-content'));
//    }else if(record==2){
//      loadURL("menu/taskRecord?type=2",$('#page-content'));
//    }else if(draft==1){
//      loadURL("menu/draft",$('#page-content'));
//    }else{
    loadURL("menu/com/pay?viewtype=2",$('#page-content'));
//    }
  });

  //编辑
  $("#ajax_edit").click(function(){
    loadURL("<%=path%>/mp/pay/input?keyId="+$("input#keyId").val()+"&draft="+draft+"&todo="+todo+"&remind="+remind+"&record="+record+"&index="+index,$('#page-content'));
  });

</script>